<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #sort {

            width: 1010px;
            height: 40px;
            margin-left: 16.5%;
            margin-top: 100px;
            background-color: rgb(255, 94, 0);

        }

        .sort1 {
            float: left;
            color: white;
            margin-left: 60px;
            margin-top: 7px;

        }

        .sort1 a {
            text-decoration: none;
            color: white;
        }

        .sort1 a :hover {

        }

        .sort2 {
            float: left;
            color: white;
            margin-left: 40px;
            margin-top: 7px;
        }

        /* 轮播 */
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 500px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .el-carousel__item {
            width: 500px;
        }

        .el-carousel {
            width: 1000px;
            margin-left: 250px;
            margin-top: 15px;
        }

        .el-carousel__container {
            height: 800px;
            width: 1200px;
        }

        /* 下面的分类 */
        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-main {
            height: 440px;
            width: 1100px;
            margin-left: 228px;
        }

        /*.el-row {*/
        /*    width: 1050px;*/
        /*    height: 350px;*/
        /*}*/

        .main-2 {
            height: 44px;
            width: 1005px;
            background-color: rgb(253, 67, 85);
            margin-bottom: 10px;
            color: white;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 40px;
            border-radius: 2%;
        }

        .main-6 {
            height: 44px;
            width: 1005px;
            background-color: rgb(84, 177, 218);
            margin-bottom: 10px;
            color: white;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 40px;
            border-radius: 2%;
        }

        .main-1 {
            height: 400px;
        }

        .main-3 {
            height: 350px;
        }

        .x1 {
            height: 44px;
            width: 1010px;
            background-color: rgb(243, 194, 70);

            color: white;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 40px;
            border-radius: 2%;
        }

        .x2 {
            height: 44px;
            width: 1010px;
            background-color: rgb(84, 177, 218);

            color: white;
            box-sizing: border-box;
            padding-top: 10px;
            padding-left: 40px;
            border-radius: 2%;
        }

        .k1 {
            width: 320px;
            height: 240px;
            margin-top: 10px;
            float: left;
            margin-left: 15px;

        }

        .k2 {
            width: 320px;
            height: 240px;

            float: left;
            margin-left: 15px;
            margin-top: 20px;

        }

        .k1-1 img {
            width: 300px;
            height: 175px;
        }

        .main-m {
            width: 1010px;
            height: 580px;
            margin-left: 245px;
            box-shadow: rgb(84, 177, 218) 0px 0px 10px
        }

        .main-m1 {
            float: left;
            min-height: 500px;
            margin-top: 20px;
            width: 1010px;
            /*height: 600px;*/
            margin-left: 245px;
            height: auto;
            box-shadow: rgb(84, 177, 218) 0px 0px 10px
        }

        #q1 {
            margin-top: 5px;
            width: 70px;
            height: 30px;
            padding: 0;
        }

        #q2 {
            margin-top: 5px;
            width: 70px;
            height: 30px;
            padding: 0;
        }

        .k1-2 {
            font-size: 15px;
            box-sizing: border-box;
            padding-left: 15px;
        }

        .k1-3 {
            font-size: 8px;
            color: gray;
            box-sizing: border-box;
            padding-left: 15px;
        }

        .k1-4 {
            color: rgb(255, 102, 0);
            font-size: 18px;
            box-sizing: border-box;
            padding-left: 20px;
        }

        .k1-4 span {
            color: rgb(255, 102, 0);
            font-size: 10px;
        }

        .k1:hover {
            cursor: pointer;
        }

        .k2:hover {
            cursor: pointer;
        }

        .sort1:hover {
            color: greenyellow;
            cursor: pointer;
        }

        .sort2:hover {
            color: greenyellow;
            cursor: pointer;
        }
    </style>
</head>

<body>
<div id="app">

    <!-- 回到顶部 -->
    <template>
        <el-backtop></el-backtop>
    </template>

    <!-- 导航栏 -->
    <el-header style="height:145px;background-color: #F8F8F8;">
        <el-row>
            <el-col>
                <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                         background-color="#F8F8F8">
                    <el-menu-item index="1" style="margin-left: 350px;padding: 0px;">
                        <img src="../img/定位.png" width="35"/>
                    </el-menu-item>
                    <el-menu-item index="2" style="padding:0px;margin: 0px 5px;">
                        <a href="/html/shouye.html" style="text-decoration: none"><span>锅锅商城</span></a>
                    </el-menu-item>
<!--                    <el-menu-item index="3" style="padding: 0px;margin-right: 20px;">-->
<!--                        <span>[切换]</span>-->
<!--                    </el-menu-item>-->


                    <el-menu-item index="4" style="color: red;"><a
                            :href="myUrl" style="text-decoration: none;">{{username}}</a></el-menu-item>
                    <el-menu-item index="5" v-if="!loginStatus"><a :href="myUrl" style="text-decoration: none;">免费注册</a></el-menu-item>
                    <el-menu-item index="5" v-if="loginStatus" @click="logout">退出</el-menu-item>

                    <el-submenu index="6">
                        <template slot="title">个人中心</template>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-1">我的订单</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-2">订单速查</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-3">我的收藏</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-4">我的评价</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-5">我的设置</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-6">会员中心</el-menu-item>
                        </a>
                        <a :href="myUrl" style="text-decoration: none;">
                            <el-menu-item index="6-7">积分商城</el-menu-item>
                        </a>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">商户服务</template>
                        <el-menu-item index="7-1">商户中心</el-menu-item>
                        <el-menu-item index="7-2">申请加盟</el-menu-item>
                        <el-menu-item index="7-3">店铺编辑</el-menu-item>
                        <el-menu-item index="7-4">菜单编辑</el-menu-item>
                        <el-menu-item index="7-5">销量查询</el-menu-item>
                        <el-menu-item index="7-6">我的设置</el-menu-item>
                    </el-submenu>
                    <el-submenu index="8">
                        <template slot="title">帮助中心</template>
                        <el-menu-item index="8-1">平台规则</el-menu-item>
                        <el-menu-item index="8-2">联系客服</el-menu-item>
                    </el-submenu>
                </el-menu>
                <div class="line"></div>
            </el-col>
        </el-row>
        <!-- 搜索框 -->
        <el-row>
            <el-col style="margin-left: 350px;" :span="1">
                <img src="../img/恐龙.png" width="50px"/>
            </el-col>
            <el-col :span="2">
                <div style="font-size:16px;color:black;line-height: 50px;">锅锅餐饮</div>
            </el-col>
            <el-col :span="6" :offset="0">
                <div style="margin-top: 1px;width:500px;line-height: 50px;">
                    <el-input placeholder="搜索商家或者地点" v-model="searchInput" class="input-with-select">
                        <el-select v-model="searchSelect" slot="prepend" placeholder="请选择"
                                   @change="MethodSearchSelectChange">
                            <el-option label="餐厅" value="1"></el-option>
                            <el-option label="地点" value="2"></el-option>
                            <el-option label="菜名" value="3"></el-option>
                            <el-option label="订单" value="4"></el-option>
                        </el-select>
                        <i slot="suffix" class="el-input__icon el-icon-circle-close"
                           @click="MethodClearSearchInput"></i>
                        <el-button slot="append" icon="el-icon-search" @click="MethodBeginSearch()"></el-button>
                    </el-input>
                </div>
            </el-col>
        </el-row>
        <!-- 搜索框下的-"搜索发现" -->
        <el-row>
            <el-col style="margin-left:540px;" :span="1">
                <span style="font-size: 12px;color:#999;">搜索发现：</span>
            </el-col>
            <el-col :span="0.1" v-for="i in searchReminderData" style="margin: 0px 5px;">
                <span style="font-size: 12px;color:#999;" @click="MethodSearchReminderClick(i)">{{i}}</span>
            </el-col>
        </el-row>
    </el-header>


    <!-- 分类 -->

    <div id="sort">
        <div class="sort1" @click="sortquery11('火锅')">
            <div>火锅</div>
        </div>
        <div id="k" v-for="item in types" :key="item">
            <div class="sort2" @click="sortquery1(item)">
                {{item}}
            </div>
        </div>

    </div>

    <!-- 轮播图 -->

    <template>
        <el-carousel :interval="4000" type="card" height="270px">
            <el-carousel-item v-for="item in 3" :key="item">
                <h3 class="medium"><img :src="imgpaths[item-1]" @click="querybuyone(item-1)"></h3>
            </el-carousel-item>
        </el-carousel>
    </template>

    <!-- 中间的分类 -->
    <el-main>
        <div class="main-1">
            <div class="main-2">特色套餐</div>
            <div class="main-3">
                <el-row>
                    <el-col :span="5" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 1 : 0">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-image
                                    style="width: 276px; height: 190px"
                                    :src="imgpaths[o-1]"
                                    :fit="fit"></el-image>
                            <div style="padding: 14px;">
                                <span>{{menu[o-1].menuName}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{menu[o-1].description}}</time>
                                    <el-button type="danger" round class="button" @click="querybuyone(o-1)" id="q1">
                                        查看详情
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-main>

    <el-main>
        <div class="main-1">
            <div class="main-6">超值优惠</div>
            <div class="main-3">
                <el-row>
                    <el-col :span="5" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 1 : 0">
                        <el-card :body-style="{ padding: '0px' }">

                            <el-image
                                    style="width: 276px; height: 190px"
                                    :src="imgpaths[o-1]"
                                    :fit="fit"></el-image>
                            <div style="padding: 14px;">
                                <span>{{menu[o-1].menuName}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{menu[o-1].description}}</time>
                                    <el-button type="danger" round class="button" id="q2" @click="querybuyone(o-1)">抢购
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-main>
    <!-- 第二部分 -->
    <div class="main-m">
        <div class="main-1">
            <div class="x1">精品套餐</div>
            <div class="main-3">
                <div class="k1" @click="query1(0)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[0]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[0].menuName}}</div>
                    <div class="k1-3">{{menu[0].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[0].price}}
                    </div>
                </div>
                <div class="k1" @click="query1(1)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[1]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[1].menuName}}</div>
                    <div class="k1-3">{{menu[1].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[1].price}}
                    </div>
                </div>
                <div class="k1" @click="query1(2)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[2]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[2].menuName}}</div>
                    <div class="k1-3">{{menu[2].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[2].price}}
                    </div>
                </div>
                <div class="k2" @click="query1(3)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[3]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[3].menuName}}</div>
                    <div class="k1-3">{{menu[3].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[3].price}}
                    </div>
                </div>
                <div class="k2" @click="query1(0)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[0]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[4].menuName}}</div>
                    <div class="k1-3">{{menu[4].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[4].price}}
                    </div>
                </div>
                <div class="k2" @click="query1(1)">
                    <div class="k1-1">
                        <el-image
                                style="width: 300px; height: 190px"
                                :src="imgpaths[1]"
                                :fit="fit"></el-image>
                    </div>
                    <div class="k1-2">{{menu[5].menuName}}</div>
                    <div class="k1-3">{{menu[5].description}}</div>
                    <div class="k1-4">
                        <span>￥</span>{{menu[5].price}}
                    </div>
                </div>


            </div>
        </div>

    </div>
    <!-- 第三部分 -->
    <div class="main-m1">
        <div class="main-1">
            <div class="x2" id="todayActive" style="text-align: left;">今日活动</div>
                <div style="float: left;width: 20%;margin: 10px 20px;height: 350px;" v-for="(item,index) in menuActive1" v-if="menuActive1.length>0">
                    <el-card :body-style="{ padding: '0px' }" style="height: 350px">
                    <el-row style="margin: 5px 0px;">
                        <el-col :span="24" >
                            <span style="float: left;color: black;font-size: 20px;"  v-if="item.state==1">限时秒杀,正在进行</span>
                            <span style="float: left;color: black;font-size: 16px;"  v-if="item.state==0">{{$moment(item.beginTime).format('MM.DD HH:mm')}} 正式开启</span>
                        </el-col>
                    </el-row>

                    <el-row style="margin: 5px 0px;">
                        <el-col :span="24">
                            <s style="float: left;color: #666;font-size: 15px;">
                                原价:{{menu1[index].price}}</s>
                            <span style="float: left;margin-left: 30px;color:red;">活动价:
                                <span style="font-size: 19px;font-weight: bold">{{item.activePrice}}￥</span>
                            </span>
                        </el-col>
                    </el-row>

                    <el-row style="margin: 5px 0px;">
                        <el-col :span="24">
                            <img :src="menuImage1[index].imgPath" width="200" height="150"/>
                        </el-col>
                    </el-row>

                        <div style="padding: 2px;">
                            <div style="font-size: 14px;color: black;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{menu1[index].menuName}}</div>
                            <div style="font-size: 12px;color: #808080;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 3px 0px;">{{menu1[index].description}}</div>
                            <div style="margin: 2px 0px">
                                <div v-if="item.state==1" style="font-size: 13px;color: #808080;height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;float:right">剩余数量：{{item.activeNumber}}</div>
                                <div v-if="item.state==0" style="font-size: 13px;color: #808080;height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;float:right">活动总量：{{item.activeNumber}}</div>
                            </div>
                            <div v-if="item.state==1">
                                <el-button type="danger" round style="float:left;margin:5px 0px 0px 40px" @click="getSecondsKillActivity(item)">立即抢购</el-button>
                            </div>
                            <div v-if="item.state==0">
                                <el-button type="success" round style="float:left;margin:5px 0px 0px 40px" @click="openMessage('活动还未开始，敬请等待')">敬请等待</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            <div class="main-3">
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <el-container style="float: left;margin-top: 50px;height: 104px;width: 100%;">
        <el-footer style="background: #F8F8F8; width: 100%;font-size: 12px;color: #999;height: 104px;">
            <el-row>
                <el-col :span="20" :offset="2">
                    <img src="../img/页脚.png" height="100"/>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>


</div>

<script src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/moment.js"></script>
<script>
    Vue.prototype.$moment = moment; //日期格式控件
    var vm = new Vue({
        el: "#app",
        data: {
            //秒杀活动
            menu1:[],
            menuActive1:[],
            menuImage1:[],
            timer1:-2,

            fit: 'fill',
            url: '',
            currentDate: new Date(),
            menu: [],
            imgpaths: [],
            types: ["西餐", "小吃", "烧烤", "西冷", "生鲜", "日料", "油炸", "法式大餐"],
            searchInput: "", //搜索输入框
            searchSelect: "",//搜索下拉框
            searchReminderData: ["金牌泰香米", "万州烤全鱼", "瓜西西火锅", "锅锅烤鸭", "五香串串"],
            myUrl: "/html/login.html",
            username: "你好，请登录",
            loginStatus: false

        }, methods: {
            //秒杀加载
            getAllActiveMenuMessage(){
                var _this = this;
                axios.get('/getAllActiveMenuMessage', {params: {}})
                    .then(function (resp) {
                        if (resp.data.success) {
                            let data = resp.data.data;
                            _this.menu1 = data.menu1;
                            _this.menuActive1 = data.menuActive1;
                            _this.menuImage1 = data.menuImage1;
                            if(_this.timer1==-2&&data.menuActive1.length>0){
                                 _this.timer1=setInterval(_this.getAllActiveMenuMessage,60000); //有活动60秒刷新一次
                            }
                            if(data.menuActive1.length==0){ //没有活动，清空定时器
                                _this.timer1=-2;
                                clearInterval(_this.timer1);
                            }
                        } else {
                            $("#todayActive").html(resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //秒杀抢购 -- 点击事件
            getSecondsKillActivity(item){
                console.log(item);
                var _this = this;
                $.ajax({
                    url: "/getSecondsKillActivity",
                    dataType: "json",
                    // contentType: 'application/json;charset=utf-8', //前端传json对象，缺少这个报错415
                    data: {
                        id:item.id,
                        // menuId:item.menuId,
                        // state:item.state,
                        // number:item.activeNumber,
                        // price:item.activePrive,
                    }, //缺少这个400
                    type: "get",
                    success: function (d) {
                        // console.log(d);
                        if (d.success) {
                            _this.$message.success("正在跳转...");
                            location.href="/html/MenuManagerActive.html"
                        } else {
                            _this.$message.error('请求错误' + d.message);
                        }
                    }
                });
            },
            //提示
            openMessage(s) {
                this.$message(s);
            },
            queryimg: function () {
                let th = this;
                axios.get('/queryMenu', {
                    params: {}
                })
                    .then(function (resp) {

                        if (resp.data.success) {

                            th.menu = resp.data.data;
                            for (var i = 0; i < th.menu.length; i++) {
                                th.imgpaths.push(th.menu[i].imgPath)
                            }

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            // 特色套餐单击事件
            querybuyone: function (num) {
                let th = this;
                axios.get('/querybuy', {
                    params: {
                        menuId: th.menu[num].menuId,
                    }
                })
                    .then(function (resp) {

                        if (resp.data.success) {

                            //  console.log(2222)
                            location.href = "/html/MenuManager.html";

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            //分类单击事件
            query1: function (num) {
                let th = this;
                axios.get('/querybuy', {
                    params: {
                        menuId: th.menu[num].menuId,
                    }
                })
                    .then(function (resp) {

                        if (resp.data.success) {

                            //  console.log(2222)
                            location.href = "/html/MenuManager.html";

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
            //分类查询
            sortquery11(type) {
                let th = this;
                axios.get('/querysort', {
                    params: {
                        type: type,
                    }
                })
                    .then(function (resp) {

                        if (resp.data.success) {

                            //  console.log(2222)
                            location.href = "/html/type.html";

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })

            },
            sortquery1: function (num) {
                let th = this;
                axios.get('/querysort', {
                    params: {
                        type: num,
                    }
                })
                    .then(function (resp) {

                        if (resp.data.success) {

                            //  console.log(2222)
                            location.href = "/html/type.html";

                        } else {
                            th.$message.error('请求错误' + resp.data.message);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            // fit: function () {
            //     [native, code]
            // },
            handleSelect(key, keyPath) {    //顶部菜单激活信息回调
                console.log(key, keyPath);
            },
            MethodSearchSelectChange() { //输入下拉框改变触发事件

            },
            MethodSearchReminderClick(i) {   //搜索框下方字体点击
                this.searchInput = i;
            },
            MethodClearSearchInput() {   //叉叉按钮点击事件-清空搜索框里的文字
                this.searchInput = "";
            },
            MethodBeginSearch() {        //点击搜索图标按钮-开始搜索
                var message = this.searchInput;
                var type = this.searchSelect;
                var _this = this;
                if (message == "") {
                    _this.$message({
                        showClose: true,
                        message: "请输入内容再搜索",
                        type: 'warning',
                        duration: 1500
                    });
                } else {
                    //request search
                    var _this = this;
                    axios.get('/getSearchResult', {
                        params: {
                            message: message,
                            type: type,
                        }
                    })
                        .then(function (resp) {
                            console.log(resp);
                            // if (resp.data.success) {
                            //     let data = resp.data.data;
                            //     _this.tableData = data.content;
                            //     _this.total = data.total;
                            //     _this.currPage = data.currPage;
                            //     location.href = "/html/search.html";
                            if (resp.data.success) {
                                location.href = "/html/search.html";
                            } else {
                                _this.$message.error('请求错误' + resp.data.message);
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            },
            checkLoginStatus() {
                let that = this;
                $.ajax({
                    url: "/checkLoginStatus",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            that.loginStatus = true;
                            that.myUrl = "/html/guoguolog.html";
                            that.username = resp.data.username;
                        }
                    }
                });
            },
            logout() {
                $.ajax({
                    url: "/logout",
                    type: "get",
                    dataType: "json",
                    success: function (resp) {
                        if (resp.success) {
                            location.href = "/html/shouye.html";
                        }
                    }
                });
            }

        }, mounted: function () {
            this.queryimg();
            this.checkLoginStatus();
            this.getAllActiveMenuMessage();
        },
    })
</script>
</body>
</html>